<template>
    <div class="Zhinan flex jcsb aic">
        <div class="Zhinan_left flex jcsb">
            <p class="Zhinan_left_title fonts20 fontw700 fontz">{{ data.guideTitle }}</p>
            <p class="Zhinan_left_main fonts18 fontz">{{ data.guideContents }}</p>
        </div>
        <div class="Zhinan_btn flex  jcc aic" @click="classClick(data.id)">
            <span class="fonts18">查看详情</span>
            <img class="Zhinan_img_rb" src="/img/r2.png" alt="" />
            <img class="Zhinan_img_rw" src="/img/rw.png" alt="" />
        </div>
    </div>
</template>
  
<script>
export default {
    name: 'ZhinanMain',
    props:["data","index"],
    data() {
        return {
        }
    },
    methods: {
        classClick(item) {

            this.$emit('lcclick',this.index)
        }
    }
}
</script>
  
<style scoped lang="scss">
.Zhinan {
    padding: 21px 30px;
    margin-bottom: 10px;
    background: #F8F9FA;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #CACFD6;

    &:hover {
        background: #FFFFFF;
        order: 1px solid #2F6CBC;

        .Zhinan_btn {
            width: 126px;
            line-height: 40px;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;
            background: #2F6CBC;
            border: 1px solid #2F6CBC;
            span {
                color: #FFFFFF;
            }
            .Zhinan_img_rb{
                display: none;
            }
            .Zhinan_img_rw{
                display: block;
            }
            img {
                width: 24px;
                height: 24px;
                margin-left: 10px;
            }
        }
    }

    .Zhinan_left {
        width: calc(100% - 200px);
        flex-direction: column;

        .Zhinan_left_main {
            
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .Zhinan_btn {
        width: 126px;
        line-height: 40px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        border: 1px solid #2F6CBC;
        .Zhinan_img_rb{
                display: block;
            }
            .Zhinan_img_rw{
                display: none;
            }
        img {
            width: 24px;
            height: 24px;
            margin-left: 10px;
        }
    }
}</style>
  